<template>
    <div>
        <div>
            <el-input value="大数据" type="text" placeholder="search" list="cars" class="search" size="small" v-model="input1" style="border-radius: 4px; width:400px"></el-input>

            <el-button icon="search" type="primary" content="查询" class="button" @click="getData5" size="small">查询</el-button>
            <el-button icon="edit" type="primary" content="生成图表" class="button" v-on:click="createChart" size="small">生成图表</el-button>
            <datalist id="cars">
                <option v-for="item in searchlist" :value="item"></option>
            </datalist>
            <br><br>
            <el-table :data="tableData" style="width: 100%;border-radius: 6px" v-if="seen">
                <el-table-column
                    v-for="field in fieldMap" :prop="field.value" :label="field.label" :key="field.value">
                </el-table-column>
            </el-table>
        </div>
        <div><h2 v-if="sen2" style="color:white">工作经验分布比较</h2></div>
        <div id="difficultpie" v-if="sen2"></div>
    </div>
</template>
<script>
    import axios from 'axios'
    import echarts from 'echarts';
    import '*/../../node_modules/echarts/theme/roma.js'
    import data1 from '../../../static/data/data1.json'
    export default{
        data(){
            return{
                searchlist:['C++','python','java','大数据'],
                tableData:[{}],
                fieldMap: [
                    {
                        value: "name",
                        label: "工作经验"
                    },{
                        value: "value",
                        label: "数量"
                    }],
                seen: true,
                sen2: true,
                input1:'大数据'
            }
        },
        created: this.tableData,
        mounted(){
            this.getData5()
        },
        methods:{
            getData5 () {
                if(this.seen == false) {
                    this.seen = true
                }
                /*let url = BASE_URL+ "getTrades"*/
                let url = BASE_URL + "GetExInfo"
                /*alert (url)*/
                let obj = {}
                obj.name=this.input1
                //obj.select={}
                let json = JSON.stringify(obj)
                /*alert(json)*/
                this.$http.post(url, json).then(function (data) {
                    this.tableData = data.data
                    for(let i = 0; i < this.tableData.length; i++){
                        if(this.tableData[i].name == '暂无要求')
                            this.tableData[i].name='未知'
                        else if(this.tableData[i].name == '')
                            this.tableData[i].name = '其他'
                            //alert(this.tableData[i].name)
                        }

                    console.log(this.tableData)
                }).catch(function (_error) {
                    this.$message({
                        message:'网络请求失败',
                        type:'error'
                    })
                    console.log(_error)
                    this.tableLoading = false;
                })
                return this.tableData
            },
            createChart: function () {
                if(this.seen == true){
                    this.seen = false
                    this.sen2 = true
                    this.drawpie("difficultpie", '65%', '68%')
                }

                else {
                    this.seen = true
                    this.sen2 = false
                }
            },
            drawpie(id, radius, centery) {
                this.chart = echarts.init(document.getElementById(id), 'roma');
                this.chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {}
                        },
                        right: 15,
                        top: 10
                    },
                    legend: {
                        orient: 'vertical',
                        left: 5,
                        top: 15,
                        data: this.tableData,/*(function () {
                         let arr = {}
                         for(let i = 0; i < this.tableData.length; i++){
                         arr.append(this.tableData[i].name)
                         }
                         let json = JSON.stringify(arr)
                         console.log(json)
                         alert(json)
                         return json
                         })()*/
                    },
                    series: [
                        {
                            name: '职业数量',
                            type: 'pie',
                            radius: radius,
                            center: ['50%', centery],
                            data: /*data1.difficult.courseDiff*/this.tableData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffset: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
        }

    }
</script>
<style scoped>
    #difficultpie {
        position: relative;
        left: 45%;
        width: 90%;
        height: 600px;
        margin-left: -45%;
        border: solid #faf6f3 2px;
        box-shadow: 0 0 10px #F7D098;
        border-radius: 10px;
        /*background-color:#000000;*/
    }
    #difficultbar {
        margin-top: 30px;
    }
    @media screen and (max-width: 420px) {
        #difficultpie {
            height: 500px;
        }
    }
</style>
